import React, { useEffect, useState } from 'react';
import { UpOutlined, DownOutlined } from '@ant-design/icons';
import { Button, Row, Col, Form } from 'antd';
import { formatMessage } from 'umi';
import styles from './index.less';

export default (props) => {
  const {
    defaultRowLayout,
    defaultColLayout,
    actionsColLayout,

    threshold = 3, // 阈值，“数据总数”大于“阈值”时，启动“展开”和“收起”功能，且超过“阈值”的“检索项”会被隐藏

    submitText = formatMessage({ id: '查询' }),
    submitButtonProps,
    onSubmit = (newValue) => {
      console.log('Search', newValue);
    },

    hideReset = false,
    onReset,

    items = [],
    initialValue = {},

    ...rest
  } = props;

  const [form] = Form.useForm();

  useEffect(() => {
    form.resetFields();
  }, [JSON.stringify(initialValue)]);

  const useToggle = items.length >= threshold; // 启动“展开”和“收起”功能

  const [expandAll, setExpandAll] = useState(false);

  return (
    <Form form={form} className={styles.searcher} {...rest} initialValues={initialValue}>
      <Row gutter={16} {...defaultRowLayout}>
        {items.map((item, index) => (
          <Col
            key={index}
            {...(!expandAll && index >= threshold
              ? { span: 0 }
              : { span: 8, ...defaultColLayout, ...item.colLayout })}
          >
            {item.field ? (
              <Form.Item {...item} name={item.name || item.field}>
                {item.child}
              </Form.Item>
            ) : (
              item.child
            )}
          </Col>
        ))}

        <Col
          {...(useToggle ? { span: 24 } : { span: 8, ...defaultColLayout, ...actionsColLayout })}
        >
          <div className={styles.submitButtons} style={{ textAlign: useToggle ? 'right' : 'left' }}>
            {useToggle && (
              <>
                {expandAll ? (
                  <a
                    onClick={() => {
                      setExpandAll(false);
                    }}
                  >
                    {formatMessage({ id: '收 起' })} <UpOutlined />
                  </a>
                ) : (
                  <a
                    onClick={() => {
                      setExpandAll(true);
                    }}
                  >
                    {formatMessage({ id: '展 开' })} <DownOutlined />
                  </a>
                )}
                &nbsp;&nbsp;&nbsp;
              </>
            )}

            <Button
              style={{ verticalAlign: 'top' }}
              type="primary"
              {...submitButtonProps}
              onClick={() => {
                form.validateFields().then((newRecord) => {
                  onSubmit(newRecord);
                  form.submit(); // 用以触发 Form.Provider => onFormFinish
                });
              }}
            >
              {submitText}
            </Button>

            {!hideReset && (
              <Button
                style={{ verticalAlign: 'top', marginLeft: 12 }}
                onClick={() => {
                  form.resetFields();
                  if (onReset) {
                    onReset();
                  }
                }}
              >
                {formatMessage({ id: '重置' })}
              </Button>
            )}
          </div>
        </Col>
      </Row>
    </Form>
  );
};
